<template>
	<div class="section productBg" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style=" 'height:' +sectionHeight + 'px;' ">

		<el-row :gutter="24" class="newsTitleArea">
			<el-col :xs="20" :sm="20" :md="20" :lg="21" :xl="22" class="newsTitle">
				<div class="title_cn">钢投特钢产品展厅</div>
				<div class="title_en">PRODUCT EXHIBITION HALL</div>
			</el-col>
			<el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="2" class="newsDetile">
				<div class="detileBtn" @click="goToProjectList()">{{$t("more")}} <i class="el-icon-d-arrow-right"></i>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="24" class="productArea">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<!-- 实力展示 -->
				<el-row style="display: flex;flex-direction: column;">
					<el-col :span="24">
						<el-card class="box-card mainImgCard" :body-style="{ padding: '0px' }" shadow="never" style="">
							<!-- 轮播图-大 -->
							<div class="swiper-container" ref="productImage" id="productImage">
								<div class="swiper-wrapper">
									<div class="swiper-slide mainSwiperSlide"
										v-for="(slide, index) in productImageSlideList" :key="slide.productId">
										<img :src="slide.fileUrl" alt="Image" style="width: 100%; height: 100%;" />
										<div class="productTitleArea">
											<div @click="goToProjectInfo(slide.productId)" class="productTitle">
												{{slide.title}}
											</div>
											<div class="productContent">
												<el-row>
													<el-col :span="20">
														<div class="productContentDetail"
															@click="goToProjectInfo(slide.productId)">
															{{slide.content}}
														</div>
													</el-col>
													<el-col :span="4" :style="slide.productId">
														<div @click="goToProjectInfo(slide.productId)"
															style="width: 100%;height: 110px;position: relative;">
															<div class="proDetileBtn">{{$t("moreDetails")}} <i
																	class="el-icon-d-arrow-right"></i></div>
														</div>
													</el-col>
												</el-row>
											</div>
											<div class="productItemBg"></div>
										</div>
									</div>
								</div>
								<div class="swiper-pagination"></div>
							</div>
							<!-- 缩略图 -->
							<div class="swiper-container-thumbnails swiper-container-thumbs" ref="product" id="product"
								style="">
								<div class="swiper-wrapper"
									:style="'margin: 0 auto;'+(isSildeCenter?'display: flex;justify-content: center;align-items: center;':'')">
									<div :class="'swiper-slide '+ (index==0?'new-active-class':'') " style=""
										v-for="(image, index) in productSlideList" :key="index">
										<el-card class="slide-content productTypeCard"
											style="; background-color: #FFF;	transition: transform 0.3s ease; padding: 5px;">
											<div :title="image.productMainName" class="productTypeNameArea">
												<div class="productIcon">
													<img :src="image.productIconUrl"
														style="width: 100%;height: 100%;" />
												</div>
												<div :title="image.productMainName" class="productTypeName">
													{{image.productMainName}}
												</div>
											</div>
										</el-card>
									</div>
								</div>
								<div @click="goToSlide(this,activeIndex-1)" class="swiper-button-prev1">
								</div>
								<div @click="goToSlide(this,activeIndex+1)" class="swiper-button-next1">
								</div>
							</div>

						</el-card>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		</el-row>
	</div>
</template>

<script>
	// 导入您需要的模块
	import Swiper from "swiper";
	import {
		forEach
	} from "../../utils/tools";
	export default {
		name: 'Products',
		props: {
			sectionHeight: Number
		},
		components: {},
		created() {
			this.bindProductMain().then(data => {
				this.initProductSwiper();
				this.checkBtnState(0);
			});
		},
		mounted() {},
		data() {
			return {
				activeIndex: 0,
				productImageSlideList: [],
				productSlideList: [],
				productImageSwiper: null,
				productSwiper: null,
				isSildeCenter: false
			}
		},
		methods: {



			bindProductMain() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.getProductMain(params).then(res => {
						that.formartProductList(res);
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			formartProductList(res) {
				let that = this;
				console.log('res.data', res.data)
				let arr = [];
				res.data.forEach(function(element) {
					let bigImg = {
						title: element.productMainName,
						content: element.content,
						productId: element.id,
						fileUrl: element.productMainFileList.length > 0 ? element.productMainFileList[0]
							.fileUrl : ''
					}
					arr.push(bigImg);
				});
				that.productSlideList = res.data;
				that.productImageSlideList = arr;

				if (that.productSlideList.length < ((window.innerWidth < 1024) ? 2 : 7)) {
					that.isSildeCenter = true;
				}

				console.log('that.productSlideList = ', that.productSlideList)
				console.log('that.productImageSlideList = ', that.productImageSlideList)
			},
			initProductSwiper() {
				let that = this;

				var thumbsSwiper = new Swiper('.swiper-container-thumbnails', {
					// 缩略图Swiper配置
					slidesPerView: (window.innerWidth < 1024) ? 2 : 7,
					spaceBetween: 5,
					freeMode: true,
					watchSlidesVisibility: true,
				})
				this.productImageSwiper = new Swiper('#productImage', {
					// loop:true,
					autoplay: {
						delay: 3000, // 自动切换的时间间隔，单位为毫秒
					},

					on: {
						slideChange: function() {
							var currentIndex = this.activeIndex; // 获取当前索引
							that.activeIndex = this.activeIndex;
							console.log('var currentIndex = this.activeIndex; 获取当前索引', currentIndex)
							// 执行相关操作
							that.changeThumbnail(currentIndex);

						}
					},
					thumbs: {
						swiper: thumbsSwiper
					}
				})


			},

			//缩略图改变触发方法
			changeThumbnail(index) {
				this.checkBtnState(index);
				const thumbnailsContainer = document.querySelector(".swiper-container-thumbs");
				if (thumbnailsContainer) {
					const bElements = thumbnailsContainer.querySelectorAll('.swiper-slide');
					const thirdBElement = bElements[index];
					bElements.forEach((bElement, index) => {
						bElement.classList.remove('new-active-class');
					});
					thirdBElement.classList.add('new-active-class'); // 添加一个新的class
				}
			},
			//轮播图跳转
			goToSlide(obj, index) {
				this.productImageSwiper.slideTo(index);
			},

			checkBtnState(index) {
				let swiperButtonPrev = document.querySelector(".swiper-button-prev1");
				let swiperButtonNext = document.querySelector(".swiper-button-next1");
				if (index == 0) {
					swiperButtonPrev.classList.add('swiper-button-disabled');

				} else {
					swiperButtonPrev.classList.remove('swiper-button-disabled');
				}
				if (index == this.productSlideList.length - 1) {
					swiperButtonNext.classList.add('swiper-button-disabled');
				} else {
					swiperButtonNext.classList.remove('swiper-button-disabled');
				}
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {
				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
			},
			goToProjectInfo(id) {
				this.$router.push({
					name: this.$t('mainProductsInfo'),
					query: {
						id: id
					}
				});
			},
			goToProjectList() {
				this.$router.push({
					name: this.$t('mainProducts'),
				});
			},

		},
		beforeDestroy() {

		},
		watch: {

		}
	};
</script>

<style scoped>
	.productBg {
		width: 100%;
		height: 100%;
		background: url("../../assets/img/bg_home_product.jpg") no-repeat;
		background-size: cover;
		background-position: center;
		cursor: pointer;
		padding-top: 100px;
	}

	.newsTitleArea {
		width: 70%;
		height: 8vh;
	}



	.title_cn {
		font-size: 1.7em;
		font-weight: bold;
		border-left: 4px solid #0484D7;
		padding-left: 10px;
		height: 22px;
		line-height: 22px;
	}

	.title_en {
		font-size: 1.2em;
		font-style: italic;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
	}

	.productBg .detileBtn {
		height: 30px;
		line-height: 30px;
		width: 100px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 0.9em;
		/* margin-top: 10px; */
		position: absolute;
		right: 12px;
		top: 10px;
	}


	.productArea {
		width: 70%;
		height: max-content;
		padding-top: 30px;
	}

	.mainImgCard {
		height: 80vh;
		background: none;
		border: none;
		position: relative;
	}

	#productImage {
		width: 91%;
		height: 50vh;
	}

	.productBg .mainSwiperSlide {
		height: 50vh;
	}

	.productBg .detileBtn:hover {
		background: #FF7200;
	}

	.productsmin {
		width: 70%;
		height: 200px;
	}

	#product {
		overflow: hidden;
	}

	.productBg .swiper-button-prev1 {
		background-image: url("../../assets/icons/icon_product_prev.png");
		background-size: 20px 40px;
		background-repeat: no-repeat;
		left: -60px;
		z-index: 9999999;
		top: calc(50vh + 2vh + 12.5vh);
		position: absolute;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		cursor: pointer;

	}

	.productBg .swiper-button-prev1.swiper-button-disabled,
	.productBg .swiper-button-next1.swiper-button-disabled {
		opacity: 0.35;
		cursor: auto;
		pointer-events: none;

	}

	.productBg .swiper-button-next1 {
		background-image: url("../../assets/icons/icon_product_next.png");
		background-size: 20px 40px;
		right: -60px;
		z-index: 9999999;
		top: calc(50vh + 2vh + 12.5vh);
		background-repeat: no-repeat;
		background-position: right;
		position: absolute;
		/*  top: 50%; */

		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		/* background-color: #ccc; */
		/* border-radius: 50%; */
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		cursor: pointer;


	}

	.productBg .productIcon {
		height: 60px;
		width: 60px;
		margin: auto;


	}

	.productBg .productIcon img {
		height: 60px;
		width: 60px;
		object-fit: fill;
	}

	.productBg .productTypeName {
		height: 80px;
		line-height: 80px;
		align-items: center;
		width: 100%;
		text-align: center;
		font-size: 1.4em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0px 10px;
	}

	.productTypeCard {
		height: 260px;
		padding: 35px 0;

	}

	.productTypeCard:hover {
		transform: scale(0.9)
	}

	.productTypeNameArea {
		height: 145px;
	}

	.productBg .swiper-button-next1 {
		right: 0px;
	}

	.productBg .swiper-button-prev1 {
		left: 0px;
	}

	.productBg .productTitleArea {
		width: 100%;
		height: 150px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 999;
	}

	.productBg .productTitle {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #FFF;
		font-size: 28px;
		width: 100%;
		padding: 0px 10px 0px 20px;
		height: 40px;
		line-height: 40px;
		position: absolute;
		bottom: 75px;
		left: 0px;
		z-index: 9999;
	}

	.productBg .productContent {
		height: 80px;
		font-size: 1em;
		line-height: 25px;
		color: #FFF;
		font-weight: 530;
		color: #FFF;
		width: 100%;
		padding: 0px 10px 0px 20px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 9999;
		word-wrap: break-word;
	}

	.productBg .productContentDetail {
		width: 100%;
		height: 70px;
		padding: 10px 0;
		line-height: 20px;
		text-align: left;
	}




	.productBg .productItemBg {
		width: 100%;
		height: 120px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 99;
		background-color: black;
		opacity: 0.2;
	}


	.productBg .proDetileBtn {
		height: 30px;
		line-height: 30px;
		width: 100px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 0.9em;
		/* margin-top: 10px; */
		position: absolute;
		right: 20px;
		top: 20px;
	}


	.productBg .proDetileBtn:hover {
		background: #FF7200;
	}

	#product .swiper-wrapper {
		height: 250px;
		width: 100%;
	}

	#product .swiper-slide {
		height: 25vh;
		width: 13%;
	}

	.new-active-class .productTypeCard {
		/* opacity: 1 !important; */
		border: 1px solid #0484D7;
		/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) */
	}

	.new-active-class .productIcon {
		transform: scale(1)
	}

	.new-active-class .productTypeName {
		font-weight: 600;
		font-size: 1.5em;
		color: #0484D7;
	}

	.swiper-container-thumbs {
		height: 28vh;
		width: 91%;
		margin: 0 auto;
		margin-top: 2vh;
	}

	::v-deep .el-card__body {
		padding: 20px 2px !important;
	}

	@media (min-width:2560px) {
		.productBg {
			padding-top: 5px;
		}

		.newsTitleArea {
			width: calc(2560px * 0.7) !important;
			height: 80px;
		}

		.productArea {
			width: calc(2120px * 0.7) !important;
			height: max-content;
			padding-top: 30px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			width: calc(2120px * 0.7 * 0.8) !important;
			height: calc(2120px * 0.7 * 0.8 * 0.5) !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 280px;
			width: calc(2120px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 20px;
		}

		#product .swiper-slide {
			height: 260px;
			width: calc((2120px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(2120px * 0.7 * 0.8 * 0.5 + 20px + 110px);
		}

		.productBg .swiper-button-next1 {
			right: 10px;
		}

		.productBg .swiper-button-prev1 {
			left: 10px;
		}

		.productBg .productTypeName {
			font-size: 18px;
		}

		.productTypeNameArea {
			margin-top: 40px;
		}
	}

	@media (max-width:2560px) {
		.productBg {
			padding-top: 5px;
		}

		.newsTitleArea {
			width: calc(2560px * 0.7) !important;
			height: 80px;
		}

		.productArea {
			width: calc(2120px * 0.7) !important;
			height: max-content;
			padding-top: 30px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			width: calc(2120px * 0.7 * 0.8) !important;
			height: calc(2120px * 0.7 * 0.8 * 0.5) !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 280px;
			width: calc(2120px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 20px;
		}

		#product .swiper-slide {
			height: 260px;
			width: calc((2120px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(2120px * 0.7 * 0.8 * 0.5 + 20px + 110px);
		}

		.productBg .swiper-button-next1 {
			right: 10px;
		}

		.productBg .swiper-button-prev1 {
			left: 10px;
		}

		.productBg .productTypeName {
			font-size: 18px;
		}

		.productTypeNameArea {
			margin-top: 40px;
		}
	}

	@media (max-width:2320px) {
		.productBg {
			padding-top: 5px;
		}

		.newsTitleArea {
			width: calc(2120px * 0.7) !important;
			height: 60px;
		}

		.productArea {
			width: calc(2120px * 0.7) !important;
			height: max-content;
			padding-top: 30px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			width: calc(1920px * 0.7 * 0.8) !important;
			height: calc(1920px * 0.7 * 0.8 * 0.5) !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 200px;
			width: calc(1920px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 20px;
		}

		#product .swiper-slide {
			height: 200px;
			width: calc((1920px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productTypeCard {
			height: 200px;
			padding: 35px 0;
		}


		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1920px * 0.7 * 0.8 * 0.5 + 20px + 75px);
		}

		.productBg .swiper-button-next1 {
			right: 10px;
		}

		.productBg .swiper-button-prev1 {
			left: 10px;
		}

		.productBg .productTypeName {
			font-size: 18px;
		}

		.productTypeNameArea {
			margin-top: 12px;
		}
	}

	@media (max-width:2120px) {
		.productBg {
			padding-top: 5px;
		}

		.newsTitleArea {
			width: calc(2120px * 0.7) !important;
			height: 80px;
		}

		.productArea {
			width: calc(2120px * 0.7) !important;
			height: max-content;
			padding-top: 30px;
		}

		.productBg .productTitle {
			font-size: 28px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			width: calc(1920px * 0.7 * 0.8) !important;
			height: calc(1920px * 0.7 * 0.8 * 0.5) !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 200px;
			width: calc(1920px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 20px;
		}

		#product .swiper-slide {
			height: 200px;
			width: calc((1920px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productTypeCard {
			height: 200px;
			padding: 35px 0;
		}

		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1920px * 0.7 * 0.8 * 0.5 + 20px + 75px);
		}

		.productBg .swiper-button-next1 {
			right: 10px;
		}

		.productBg .swiper-button-prev1 {
			left: 10px;
		}

		.productBg .productTypeName {
			font-size: 18px;
		}

		.productTypeNameArea {
			margin-top: 12px;
		}
	}

	@media (max-width:1920px) {
		.productBg {
			padding-top: 5px;
		}

		.newsTitleArea {
			width: calc(1920px * 0.69) !important;
			height: 60px;
		}

		.productArea {
			width: calc(1920px * 0.7) !important;
			height: max-content;
			padding-top: 0px;
		}

		.productBg .productTitle {
			font-size: 28px;
		}

		.mainImgCard {
			height: max-content
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			/* width: calc(1920px * 0.7 * 0.8) !important;
			height: calc(1920px * 0.7 * 0.8 * 0.5) !important; */
			width: 1075px !important;
			height: 537px !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 180px;
			width: calc(1920px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 20px;
		}

		#product .swiper-slide {
			height: 180px;
			width: calc((1920px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productTypeCard {
			height: 180px;
			padding: 15px 0;
		}

		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1920px * 0.7 * 0.8 * 0.5 + 20px + 85px);
		}

		.productBg .swiper-button-next1 {
			right: 0px;
		}

		.productBg .swiper-button-prev1 {
			left: 0px;
		}

		.productBg .productTypeName {
			height: 50px;
			line-height: 50px;
			font-size: 16px;
		}

		.productTypeNameArea {
			margin-top: 10px;
		}
	}

	@media (max-width:1720px) {
		.productBg {
			padding-top: 0px;
		}

		.newsTitleArea {
			width: calc(1720px * 0.7) !important;
			height: 60px;
		}

		.productArea {
			width: calc(1720px * 0.7) !important;
			height: max-content;
			padding-top: 0px;
		}

		.productBg .productTitle {
			font-size: 24px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			/* width: calc(1720px * 0.7 * 0.7) !important;
			height: calc(1720px * 0.7 * 0.7 * 0.5) !important; */
			width: 842px !important;
			height: 421px !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 130px;
			width: calc(1720px * 0.7 * 0.7) !important;
			margin: 0 auto;
			margin-top: 10px;
		}

		#product .swiper-slide {
			height: 130px;
			width: calc((1720px * 0.7 * 0.7 - 30px) / 7) !important;
		}

		.productTypeCard {
			height: 130px;
		}


		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1720px * 0.7 * 0.7 * 0.5 + 10px + 45px);
		}

		.productBg .swiper-button-next1 {
			right: 0px;
		}

		.productBg .swiper-button-prev1 {
			left: 0px;
		}

		::v-deep .el-card__body {
			padding: 2px !important;
		}

		.productTypeNameArea {
			height: 120px;
		}

		.productBg .productTypeName {
			height: 50px;
			line-height: 50px;
			font-size: 16px;
		}

		.productTypeNameArea {
			margin-top: 16px;
		}

		.productBg .productIcon {
			height: 40px;
			width: 40px;
			margin: auto;
		}
	}

	@media (max-width:1520px) {
		.productBg .title_cn {
			font-size: 22px;
		}

		.productBg .title_en {
			font-size: 18px;
		}

		.productBg {
			padding-top: 40px;
		}

		.newsTitleArea {
			width: calc(1520px * 0.7) !important;
			height: 60px;
		}

		.productArea {
			width: calc(1520px * 0.7) !important;
			height: max-content;
			padding-top: 0px;
		}

		.productBg .productTitle {
			font-size: 24px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			/* width: calc(1520px * 0.7 * 0.8) !important;
			height: calc(1520px * 0.7 * 0.8 * 0.5) !important; */
			width: 851px !important;
			height: 425px !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 130px;
			width: calc(1520px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 20px;
		}

		#product .swiper-slide {
			height: 130px;
			width: calc((1520px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productTypeCard {
			height: 130px;
		}


		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1520px * 0.7 * 0.8 * 0.5 + 10px + 55px);
		}

		.productBg .swiper-button-next1 {
			right: 0px;
		}

		.productBg .swiper-button-prev1 {
			left: 0px;
		}

		.productTypeNameArea {
			height: 120px;
		}

		.productBg .productTypeName {
			height: 50px;
			line-height: 50px;
		}

		.productTypeNameArea {
			margin-top: 16px;
		}
	}

	@media (max-width:1366px) {
		.productBg .title_cn {
			font-size: 20px;
		}

		.productBg .title_en {
			font-size: 16px;
		}

		.productBg {
			padding-top: 0px;
		}

		.productBg .productTitle {
			font-size: 22px;
		}

		.productBg .proDetileBtn {
			width: 70px;
			font-size: 0.8em;
			right: 0px;
		}

		.productBg .productContentDetail {
			font-size: 0.8em;
		}

		.productBg .productContentDetail {
			line-height: 16px;
		}



		.newsTitleArea {
			width: calc(1366px * 0.7) !important;
			height: 60px;
		}

		.productArea {
			width: calc(1366px * 0.7) !important;
			height: max-content;
			padding-top: 0px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
/* 			width: calc(1366px * 0.7 * 0.8) !important;
			height: calc(1366px * 0.7 * 0.8 * 0.5) !important; */
			width: 765px !important;
			height: 382px !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 140px;
			width: calc(1366px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 10px;
		}

		#product .swiper-slide {
			height: 130px;
			width: calc((1366px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productBg .productTypeName {
			font-size: 0.8em;
			height: 50px;
			line-height: 50px;
		}

		.new-active-class .productTypeName {
			font-size: 0.9em;
		}

		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1366px * 0.7 * 0.8 * 0.5 + 10px + 45px);
		}

		.productBg .swiper-button-next1 {
			right: 0px;
		}

		.productBg .swiper-button-prev1 {
			left: 0px;
		}

		.productTypeCard {
			height: 130px;
			padding: 0px;
		}

		.el-card__body {
			padding: 20px 20px 0px 20px !important;
		}


		.productTypeNameArea {
			height: 120px;
			padding-top: 15px;
		}

		.productBg .productIcon {
			height: 30px;
			width: 30px;
			margin: auto;
		}

		.productTypeNameArea {
			margin-top: 10px;
		}
	}

	@media (max-width:1120px) {
		.productBg .title_cn {
			font-size: 18px;
		}

		.productBg .title_en {
			font-size: 14px;
		}

		.productBg {
			padding-top: 20px;
		}

		.productBg .productTitle {
			font-size: 20px;
		}

		.productBg .proDetileBtn {
			width: 70px;
			font-size: 0.8em;
			right: 0px;
		}

		.productBg .productContentDetail {
			font-size: 0.8em;
		}

		.productBg .productContentDetail {
			line-height: 16px;
		}

		.newsTitleArea {
			width: calc(1120px * 0.7) !important;
			height: 60px;
		}

		.productArea {
			width: calc(1120px * 0.7) !important;
			height: max-content;
			padding-top: 0px;
		}

		.mainImgCard {
			height: max-content
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			/* width: calc(1120px * 0.7 * 0.8) !important;
			height: calc(1120px * 0.7 * 0.8 * 0.5) !important; */
			width:627px !important;
			height: 313px !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 140px;
			width: calc(1120px * 0.7 * 0.8) !important;
			margin: 0 auto;
			margin-top: 10px;
		}

		#product .swiper-slide {
			height: 130px;
			width: calc((1120px * 0.7 * 0.8 - 30px) / 7) !important;
		}

		.productBg .productTypeName {
			font-size: 0.8em;
			height: 70px;
			line-height: 70px;
		}

		.new-active-class .productTypeName {
			font-size: 0.9em;
		}

		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1120px * 0.7 * 0.8 * 0.5 + 10px + 45px);
		}

		.productBg .swiper-button-next1 {
			right: 0px;
		}

		.productBg .swiper-button-prev1 {
			left: 0px;
		}

		.productTypeCard {
			height: 136px;
			padding: 0px;
		}

		.el-card__body {
			padding: 0px 20px 0px 20px !important;
		}

		.productTypeNameArea {
			height: 130px;
			padding-top: 15px;
		}

		.productBg .productIcon {
			height: 40px;
			width: 40px;
			margin: auto;
		}

		.productTypeNameArea {
			margin-top: 2px;
		}
	}

	@media (max-width:1024px) {
		.productBg .title_cn {
			font-size: 18px;
		}

		.productBg .title_en {
			font-size: 14px;
		}

		.productBg {
			padding-top: 20px;
		}

		.productBg .productTitle {
			font-size: 20px;
		}

		.productBg .proDetileBtn {
			width: 70px;
			font-size: 0.8em;
			right: 0px;
		}

		.productBg .productContentDetail {
			font-size: 0.8em;
		}

		.productBg .productContentDetail {
			line-height: 16px;
		}



		.newsTitleArea {
			width: calc(1024px * 0.7) !important;
			height: 60px;
		}

		.productArea {
			width: calc(1024px * 0.7) !important;
			height: max-content;
			padding-top: 30px;
		}

		.mainImgCard {
			height: max-content;
		}

		#productImage,
		#productImage .swiper-wrapper,
		#productImage .mainSwiperSlide,
		#productImage .mainSwiperSlide img {
			/* width: calc(1024px * 0.7 * 0.91) !important;
			height: calc(1024px * 0.7 * 0.91 * 0.5) !important; */
			width: 773px !important;
			height: 286px !important;
		}


		#product,
		#product .swiper-wrapper {
			height: 140px;
			width: calc(1024px * 0.7 * 0.91) !important;
			margin: 0 auto;
			margin-top: 10px;
		}

		#product .swiper-slide {
			height: 130px;
			width: calc((1024px * 0.7 * 0.91 - 30px) / 7) !important;
		}

		.productBg .productTypeName {
			font-size: 0.8em;
			height: 70px;
			line-height: 70px;
		}

		.new-active-class .productTypeName {
			font-size: 0.9em;
		}

		.productBg .swiper-button-prev1,
		.productBg .swiper-button-next1 {
			top: calc(1024px * 0.7 * 0.91 * 0.5 + 10px + 10px);
			background-size: 15px 30px;
			width: 30px;
			height: 30px;
		}

		.productBg .swiper-button-next1 {
			right: 0px;
		}

		.productBg .swiper-button-prev1 {
			left: 0px;
		}

		.productTypeCard {
			height: 130px;
			padding: 0px;
		}

		.el-card__body {
			padding: 20px 2px 0px 2px !important;
		}

		.productTypeNameArea {
			height: 130px;
			padding-top: 15px;
		}

		.productBg .productIcon {
			height: 40px;
			width: 40px;
			margin: auto;
		}

		.productTypeNameArea {
			margin-top: 0px;
		}
	}
</style>
